<template>
    <div class="forum-create-container">
        <div class="forum-create">
            <PostEditor ref="postEditorRef" />
            <Enclosure @updateFileList="uploadFileList" />
            <Cover @formDataChanged="updataForm" />
        </div>
        <div class="submit-footer">
            <div class="submit-container-wrapper">
                <p class="submit-text">字数：{{ totalWords }}</p>
                <div class="submit-button-wrapper">
                    <button class="submit-button" @click="handleSubmit">发布</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import PostEditor from './Editor/index.vue';
import Cover from './Cover/index.vue';
import Enclosure from './Enclosure/index.vue';
import { ElMessage } from 'element-plus';
import { handleCreateForum } from '@/service/forum';
import { useRouter } from 'vue-router';
// 引用编辑器组件
const postEditorRef = ref(null);
const enclosureFileList = ref([]);
const formUploadValue = ref([]);
const router = useRouter();
// 计算总字数
const totalWords = computed(() => {
    if (!postEditorRef.value) return 0;
    return postEditorRef.value.getTotalWords();
});

const uploadFileList = (fileList) => {
    console.log('fileList', fileList)
    enclosureFileList.value = fileList;
}

const updataForm = (formValue) => {
    console.log(formValue, 'formValue')
    formUploadValue.value = formValue;
}   

// 提交表单
const handleSubmit = () => {
    if (!postEditorRef.value) return;
    
    // 获取标题和正文内容
    const titleContent = postEditorRef.value.getTitleContent();
    const contentBody = postEditorRef.value.getContentBody();
    
    // 表单验证
    if (!titleContent || titleContent.trim() === '') {
        ElMessage.warning('请填写标题');
        return;
    }
    
    // 处理富文本编辑器可能返回的空p标签
    if (!contentBody || contentBody.trim() === '' || contentBody === '<p></p>' || contentBody === '<p><br></p>') {
        ElMessage.warning('请填写内容');
        return;
    }
    
    if (!formUploadValue.value.cover) {
        ElMessage.warning('请上传封面');
        return;
    }
    
    if (!formUploadValue.value.forumType) {
        ElMessage.warning('请选择论坛类型');
        return;
    }
    
    console.log('提交内容', {
        title: titleContent, 
        content: contentBody
    });
    let imgList = [];
    let materialList = [];
    if(enclosureFileList.value.length > 0) {
        materialList = enclosureFileList.value.map((item) => {
            return {
                url: item.url,
                size: item.size,
                name: item.name
            }
        });
    }
    imgList[0] = formUploadValue.value.cover;
    const params = {
        content: contentBody,
        logid: 0,
        origin: 1,
        title: titleContent,
        type: formUploadValue.value.forumType,
        img: imgList,
        material: materialList
    }
    console.log(params, 'params')
    handleCreateForum(params).then((res) => {
        console.log(res, 'res')
        if(res.code === '000000') {
            ElMessage.success('发布成功');
            router.push('/forum');
        }
    })

    
    // TODO: 实际的提交逻辑
};
</script>

<style scoped lang="scss">
.forum-create-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
}

.forum-create {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    margin-top: 10px;
    flex: 1;
}

.submit-footer {
    width: 100%;
    height: 64px;
    background-color: #fff;
    margin-top: 40px;
    .submit-container-wrapper {
        width: 1000px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .submit-text {
            font-size: 16px;
            color: #333;
            font-weight: 600;
        }   
        .submit-button-wrapper {
            .submit-button {
                width: 240px;
                height: 44px;
                background-color: #126983;
                color: #fff;
                border-radius: 8px;
                border: none;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
                text-align: center;
                line-height: 44px;
            }
        }
    }
}
</style>

